<template>
  <div class="area-container">
    <p class="area-title">
      <span>
        服务空闲情况
      </span>

      <el-select
        v-model="value"
        size="small"
        clearable
        filterable
        placeholder="请选择系统"
        @change="getInterfaceIdleRatio"
      >
        <el-option
          v-for="(item, index) in systemList"
          :key="index"
          :label="item.systemName"
          :value="item.id"
        />
      </el-select>
    </p>

    <!-- 饼状图 -->
    <div class="area-chart-container">
      <div ref="leftTop" />
    </div>
  </div>
</template>

<script>
import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import resize from '@/framework/utils/mixins/resize'
import { getInterfaceIdleRatioApi } from '@/api/index'
export default {
  name: 'InterfacePlatformIndex',
  mixins: [resize],

  props: {
    systemList: {
      type: Array,
      default: () => []
    }
  },

  data() {
    return {
      projectList: [],
      value: '',
      chart: null
    }
  },

  mounted () {
    this.getInterfaceIdleRatio()
  },

  methods: {
    initChart (data) {
      if (this.chart) this.chart.clear()
      this.chart = echarts.init(this.$refs.leftTop, 'macarons')
      const option = {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'horizontal',
          bottom: '0',
          left: 'center'
        },
        series: [
          {
            type: 'pie',
            radius: '60%',
            data: [
              { value: data[0], name: '空闲' },
              { value: data[1], name: '已用' }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }
      this.chart.setOption(option)
    },

    getInterfaceIdleRatio () {
      getInterfaceIdleRatioApi({
        systemId: this.value
      }).then(({ code, data }) => {
        if (code === '00000') {
          this.initChart(data.total ? [data.total - data.used, data.used] : [0, 0])
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.area-chart-container {
  height: calc(100% - 50px);
  & > div {
    height: 100%;
  }
}
</style>
